// 单词拼写
<template>
  <div class="spell">

    <Head />
    <div class="search">
      <p>人教版小学英语必修教材-拼写</p>
      <p class="wen">
        <input type="text" placeholder="英汉互译词典输入框" />
        <img src="../assets/sousuo.png" class="pos" />
      </p>
      <img src="../assets/guanbi(1).png" @click="back()" />
    </div>
    <div class="con">
      <div class="page-bar left">
        <ul>
          <li v-if="list_in != stop">
            <a @click="before()" style="padding-left: 30%"><img src="../assets/xiangshang.png" style="width: 80%" /></a>
          </li>
          <li v-else>
            <a class="banclick"><img src="../assets/xiangshang.png" /></a>
          </li>
          <li v-for="(item, index) in show_list" v-bind:class="{ active: list_in == index }" :key="index">
            <a @click="select(index)" style="diplay: block">
              <p>{{ item.title }}</p>
              <p class="size">
                <span>{{ item.entry }}</span>- <span>{{ item.yet }}</span> |
                <span>{{ item.error }}</span>
              </p>
            </a>
          </li>
          <li v-if="start != list_in">
            <a @click="next()" style="padding-left: 30%"><img src="../assets/xiangxia.png" style="width: 80%" /></a>
          </li>
          <!-- @click="xia()" id="xia" -->
          <li v-else>
            <a class="banclick"><img src="../assets/xiangxia.png" /></a>
          </li>
        </ul>
      </div>
      <div class="right">
        <div v-show="cur == 0">
          <div class="content">
            <div class="tit">{{ conts.title }}</div>
            <div class="down">
              <p class="color">{{ conts.desc }}</p>
              <div class="tab" id="tab">
                {{ contm }}
              </div>
              <button @click="nexts()">下一条</button>
              <div class="li">
                <!-- <p v-for="(item, index) in li" :key="index">{{ item.text }}</p> -->
                <p>[例句]{{ conts.example }}</p>
                <p>[翻译]{{ conts.translate }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
  import Head from "@/components/Head.vue";
  import Footer from "@/components/Footer.vue";
  import axios from "axios";
  import {
    spellWord
  } from '@/api'
  export default {
    name: "Word",
    components: {
      Head,
      Footer,
    },
    data() {
      return {
        all: 5, //总页数
        cur: 0, //当前页码
        totalPage: 1, //当前条数
        list: [{
            title: "第一章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第二章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第三章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第四章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第五章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第六章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第七章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第八章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第九章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第十章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第十一章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
          {
            title: "第十二章节",
            entry: "条目47",
            yet: "已学0",
            error: "错误2"
          },
        ],
        show_list: [],
        list_in: 0,
        start: 12,
        stop: 0,
        // con: {
        //   title: "【中】独角兽",
        //   word: "unicorn",
        //   nei: "unicorn",
        // },
        // li: [
        //   { text: "[例句]He’s modelling a unicorn in wax.." },
        //   { text: "他用蜡制作独角兽。" },
        //   { text: "[其他] 复数：unicorns" },
        // ],
        conts: {},
        // 收传回去
        czid: "",
        czindex: "",
        // 写好的
        contm: "",
      };
    },
    created() {
      // let content = this.$route.query.cons;
      // console.log(content);
      // 获取index
      let ints = this.$route.query.index_s;
      console.log(ints);
      // 获取id
      let id = this.$route.query.id;
      console.log(id);
      // 内容
      let conmain = this.$route.query.conmain;
      console.log(conmain);
      this.contm = conmain;

      this.czid = id;
      this.czindex = parseInt(ints) + 1;

      console.log(this.czindex, 5656);
      console.log(ints, 111);

      let data = {
        unit_id: id
      }
      spellWord(data).then((response) => {
        this.conts = response.data.neirong[ints];
      })

      // axios
      //   .get("/api/SentExam/index", {
      //     params: {
      //       unit_id: id
      //     }
      //   })
      //   .then((res) => {
      //     console.log(res);
      //     console.log(res.data.data.neirong[ints]);
      //     this.conts = res.data.data.neirong[ints];
      //   });

      this.dataListFn();
      this.con.nei.split(",");
      document.getElementById("tab").innerHTML = con.nei;
    },
    methods: {
      // 传回去
      nexts() {
        this.$router.push({
          path: "/spellb",
          query: {
            intex: this.czindex,
            unit_id: this.czid
          },
        });
      },
      //请求数据
      dataListFn(index) {
        this.dellist();
        console.log(this.show_list);
      },
      //分页
      select(index) {
        this.list_in = index;
      },
      dellist(index, stop) {
        let arr = this.list;
        this.show_list = arr.slice(index || 0, stop || 6);
        console.log(this.show_list);
      },
      next() {
        this.list_in += 1;
        if (this.list_in == 6) {
          this.dellist(6, 12);
          this.list_in = 0;
          this.start = 5;
          this.stop = 12;
        }
      },
      before() {
        this.list_in -= 1;
        if (this.start == 5 && this.list_in == -1) {
          this.dellist(0, 6);
          this.list_in = 5;
          this.start = 12;
          this.stop = 0;
        }
      },
      back() {
        this.$router.push("index");
      },
    },
    watch: {
      list_in() {
        console.log(this.list_in);
      },
    },
  };

</script>

<style lang="scss" scoped>
  /*分页*/
  .page-bar {
    margin: 40px auto;
    margin-top: 150px;

    .size {
      margin-bottom: 1rem;
    }
  }

  ul,
  li {
    margin: 0px;
    padding: 0px;
  }

  li {
    list-style: none;
  }

  .page-bar li:first-child>a {
    margin-left: 0px;
  }

  .page-bar a {
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 2rem;
    color: #fff;
    cursor: pointer;
    // margin-right: 20px;
  }

  .page-bar a:hover {
    // background-color: #eee;
    color: #05d380;
  }

  .page-bar a.banclick {
    cursor: not-allowed;
    padding-left: 30%;
  }

  .page-bar a.banclick img {
    width: 80%;
  }

  .page-bar .active a {
    color: #fff;
    cursor: default;
    color: #05d380;
  }

  .page-bar i {
    font-style: normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
  }

  .tab {
    font-size: 50px;
    width: 20%;
    margin: 0 auto;
    text-align: center;
    border: 2px solid #fc2520;
    padding: 0 0 0.4rem 0;
  }

  .spell {
    width: 100%;

    .search {
      width: 98%;
      padding: 0 1%;
      height: 40px;
      line-height: 40px;
      background-color: #3571ff;
      color: #fff;
      display: flex;
      justify-content: space-between;
      padding-bottom: 3px;

      .wen {
        width: 24%;
        position: relative;

        input {
          width: 100%;
          background: #ffffff;
          border-radius: 24px;
          border: 1px solid #fff;
          height: 28px;
          line-height: 28px;
          text-indent: 2.4em;
        }

        .pos {
          position: absolute;
          left: 6px;
          top: 13px;
          width: 4.5%;
        }
      }

      >img {
        width: 1%;
        height: 22px;
        margin-top: 8px;
      }
    }

    .con {
      width: 99%;
      margin-left: 1%;
      display: flex;
      justify-content: space-between;

      .left {
        width: 14%;
        background-color: #000;
        opacity: 0.7;
        color: #fff;
        margin-top: 0.6rem;

        .btn {
          img {
            width: 12%;
            // margin-left: 44%;
            margin: 1rem 44% 1rem;
          }
        }

        .list {
          margin: 2rem 0;
          margin-left: 20%;

          .size {
            font-size: 14px;
          }
        }
      }

      .right {
        width: 88%;
        // margin: 0 auto;
        background-color: #f5f5f5;
        padding-bottom: 6.4rem;

        .content {
          width: 94%;
          background-color: #fff;
          margin: 1rem 2% 0;

          .tit {
            width: 94%;
            margin: 0 auto;
            text-align: center;
            font-size: 26px;
            padding: 3rem 0;
            color: #333333;
            border-bottom: 1px solid #f5f5f5;
          }

          .down {
            width: 100%;
            margin-top: 1rem;

            .color {
              font-size: 50px;
              text-align: center;
              color: #ff2a25;
            }

            button {
              height: 50px;
              line-height: 50px;
              border: 1px solid #fff;
              outline: none;
              width: 14%;
              margin-left: 43%;
              color: #fff;
              margin-top: 6rem;
              background: linear-gradient(-11deg, #05d380, #46eaa8);
              box-shadow: 0px 4px 10px 0px rgba(18, 47, 95, 0.15);
              border-radius: 5px;
              font-size: 18px;
            }

            .li {
              margin-top: 2rem;
              margin-left: 6%;

              p {
                line-height: 2rem;
              }
            }
          }
        }
      }
    }
  }

</style>
